<template>
  <el-dialog v-model="visible" :title="title" width="720" show-footer show-zoom resize :close-on-click-modal="false"
    :close-on-press-escape="false" @close="close">
    <template #default>
      <el-form v-if="handleType =='view'" ref="formRef" :rules="rules" :model="form" label-align="right" label-width="105"
        size="default" :label-position="handleType == 'view' ? 'left' : 'top'">
        <el-row :gutter="20">
          <el-col :span="handleType == 'view' ? 8 : 10">
            <el-form-item label="货位编号:" :prop="handleType == 'view' ? '' : 'location_code'">
              <template v-if="handleType == 'view'">{{ form.location_code }}</template>
              <el-input v-else v-model="form.location_code" placeholder="请输入货位编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="handleType == 'view' ? 8 : 10">
            <el-form-item label="所属仓库" :prop="handleType == 'view' ? '' : 'warehouse_id'">
              <template v-if="handleType == 'view'">{{ form.warehouse_name }}</template>
              <div v-else class="flex">
                <el-select style="width: 300px;" class="w-full" v-model="form.warehouse_id" placeholder="请输入所属仓库"
                  filterable @change="changeWarehouse">
                  <el-option v-for=" item  in  props.wareDataList " :key="item.id" :label="item.warehouse_name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-switch class="ml-2" v-model="form.status" inline-prompt active-text="启用" inactive-text="禁用"
                  :active-value='1' :inactive-value='0' />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="handleType == 'view'">
            <el-form-item label="是否启用">{{ form.status == 1 ? '启用' : '禁用' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属楼层" :prop="handleType == 'view' ? '' : 'floor_id'">
              <template v-if="handleType == 'view'">{{ form.floor_name }}</template>
              <el-select v-else class="w-full" v-model="form.floor_id" placeholder="请选择所属楼层" filterable
                @change="changeFloor">
                <el-option v-for=" item  in  floorList " :key="item.id" :label="item.floor_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区域" :prop="handleType == 'view' ? '' : 'area_id'">
              <template v-if="handleType == 'view'">{{ form.area_name }}</template>
              <el-select v-else class="w-full" v-model="form.area_id" placeholder="请选择所属区域" @change="changeArea">
                <el-option v-for=" item  in  areaList " :key="item.id" :label="item.area_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货位类型" :prop="handleType == 'view' ? '' : 'type'">
              <template v-if="handleType == 'view'">{{ form.type_cn }}</template>
              <el-select v-else class="w-full" v-model="form.type" placeholder="请选择货位类型">
                <el-option v-for=" item  in  props.options['base.location']?.[0].locationType " :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="长" :prop="handleType == 'view' ? '' : 'length'">
              <template v-if="handleType == 'view'">{{ form.length }} CM</template>
              <el-input v-else v-model="form.length" placeholder="请输入">
                <template #append>CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽" :prop="handleType == 'view' ? '' : 'width'">
              <template v-if="handleType == 'view'">{{ form.width }} CM</template>
              <el-input v-else v-model="form.width" placeholder="请输入">
                <template #append>CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高" :prop="handleType == 'view' ? '' : 'height'">
              <template v-if="handleType == 'view'">{{ form.height }} CM</template>
              <el-input v-else v-model="form.height" placeholder="请输入">
                <template #append>CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积">
              <template v-if="handleType == 'view'">{{ form.height }} CM</template>
              <el-input v-else v-model="form.volume" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否混放">
              <template v-if="handleType == 'view'">{{ form.mix_status_cn }}</template>
              <el-select v-else class="w-full" v-model="form.mix_status" placeholder="请选择是否混放">
                <el-option v-for=" item  in  props.options['base.location']?.[0].mixStatus " :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="混放种类数量" :prop="form.mix_status == 1 ? 'max_mix_num' : ''">
              <template v-if="handleType == 'view'">{{ form.max_mix_num }}</template>
              <el-input v-else v-model="form.max_mix_num" :disabled="form.mix_status == 0"
                placeholder="请输入混放种类数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否拣货货位" :required="handleType != 'view'">
              <template v-if="handleType == 'view'">{{ form.pick_cn }}</template>
              <el-select v-else class="w-full" v-model="form.pick_status" placeholder="请选择是否拣货货位">
                <el-option v-for=" item  in  props.options['base.location']?.[0].pickStatus " :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-else ref="formRef" :rules="rules" :model="form" label-align="right" label-width="105"
        size="default" :label-position="handleType == 'view' ? 'left' : 'top'">
        <el-row :gutter="20">
          <el-col :span="handleType == 'view' ? 8 : 10">
            <el-form-item label="货位编号" :prop="handleType == 'view' ? '' : 'location_code'">
              <template v-if="handleType == 'view'">{{ form.location_code }}</template>
              <el-input v-else v-model="form.location_code" placeholder="请输入货位编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="handleType == 'view' ? 8 : 10">
            <el-form-item label="所属仓库" :prop="handleType == 'view' ? '' : 'warehouse_id'">
              <template v-if="handleType == 'view'">{{ form.warehouse_name }}</template>
              <div v-else class="flex">
                <el-select style="width: 300px;" class="w-full" v-model="form.warehouse_id" placeholder="请输入所属仓库"
                  filterable @change="changeWarehouse">
                  <el-option v-for=" item  in  props.wareDataList " :key="item.id" :label="item.warehouse_name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <el-switch class="ml-2" v-model="form.status" inline-prompt active-text="启用" inactive-text="禁用"
                  :active-value='1' :inactive-value='0' />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="handleType == 'view'">
            <el-form-item label="是否启用">{{ form.status == 1 ? '启用' : '禁用' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属楼层" :prop="handleType == 'view' ? '' : 'floor_id'">
              <template v-if="handleType == 'view'">{{ form.floor_name }}</template>
              <el-select v-else class="w-full" v-model="form.floor_id" placeholder="请选择所属楼层" filterable
                @change="changeFloor">
                <el-option v-for=" item  in  floorList " :key="item.id" :label="item.floor_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区域" :prop="handleType == 'view' ? '' : 'area_id'">
              <template v-if="handleType == 'view'">{{ form.area_name }}</template>
              <el-select v-else class="w-full" v-model="form.area_id" placeholder="请选择所属区域" @change="changeArea">
                <el-option v-for=" item  in  areaList " :key="item.id" :label="item.area_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货位类型" :prop="handleType == 'view' ? '' : 'type'">
              <template v-if="handleType == 'view'">{{ form.type_cn }}</template>
              <el-select v-else class="w-full" v-model="form.type" placeholder="请选择货位类型">
                <el-option v-for=" item  in  props.options['base.location']?.[0].locationType " :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="长" :prop="handleType == 'view' ? '' : 'length'">
              <template v-if="handleType == 'view'">{{ form.length }} CM</template>
              <el-input v-else v-model="form.length" placeholder="请输入">
                <template #append>CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽" :prop="handleType == 'view' ? '' : 'width'">
              <template v-if="handleType == 'view'">{{ form.width }} CM</template>
              <el-input v-else v-model="form.width" placeholder="请输入">
                <template #append>CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高" :prop="handleType == 'view' ? '' : 'height'">
              <template v-if="handleType == 'view'">{{ form.height }} CM</template>
              <el-input v-else v-model="form.height" placeholder="请输入">
                <template #append>CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积">
              <template v-if="handleType == 'view'">{{ form.height }} CM</template>
              <el-input v-else v-model="form.volume" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否混放">
              <template v-if="handleType == 'view'">{{ form.mix_status_cn }}</template>
              <el-select v-else class="w-full" v-model="form.mix_status" placeholder="请选择是否混放">
                <el-option v-for=" item  in  props.options['base.location']?.[0].mixStatus " :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="混放种类数量" :prop="form.mix_status == 1 ? 'max_mix_num' : ''">
              <template v-if="handleType == 'view'">{{ form.max_mix_num }}</template>
              <el-input v-else v-model="form.max_mix_num" :disabled="form.mix_status == 0"
                placeholder="请输入混放种类数量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否拣货货位" :required="handleType != 'view'">
              <template v-if="handleType == 'view'">{{ form.pick_cn }}</template>
              <el-select v-else class="w-full" v-model="form.pick_status" placeholder="请选择是否拣货货位">
                <el-option v-for=" item  in  props.options['base.location']?.[0].pickStatus " :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <template #footer>
      <template v-if="handleType == 'view'">
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
      </template>
      <div class="flex justify-center py-2" v-else>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)">保 存</el-button>
      </div>

    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getLocationDetail, saveLocation, updateLocation } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  options: {
    type: Object,
    default: {}
  },
  wareDataList: {
    type: Array,
    default: []
  },
})

const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {
    location_code: [{
      required: true, message: '请输入货位编号', trigger: 'blur'
    }],
    warehouse_id: [{
      required: true, message: '请选择所属仓库', trigger: 'change'
    }],
    floor_id: [{
      required: true, message: '请选择所属楼层', trigger: 'change'
    }],
    area_id: [{
      required: true, message: '请选择所属区域', trigger: 'change'
    }],
    type: [{
      required: true, message: '请选择货位类型', trigger: 'change'
    }],
    length: [{
      required: true, message: '请输入长', trigger: 'blur'
    }],
    width: [{
      required: true, message: '请输入宽', trigger: 'blur'
    }],
    height: [{
      required: true, message: '请输入高', trigger: 'blur'
    }],
    max_mix_num: [{
      required: true, message: '请输入混放种类数量', trigger: 'blur'
    }],
  },
  floorList: [],
  areaList: []
})
const { form, title, handleType, rules, floorList, areaList } = toRefs(data)

const statusMap = new Map([
  ['add', '新增'],
  ['edit', '编辑'],
  ['view', '查看'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    status: 1,
    mix_status: 0,
    pick_status: 1
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getLocationDetail({
      id
    })
    form.value = res.data
    filterList()
  } catch (e) {
    throw Error(e)
  }
}

const filterList = () => {
  const warehouse = props.wareDataList.find(element => element.id === form.value.warehouse_id);
  floorList.value = warehouse?.floors || []
  const floor = floorList.value.find(element => element.id === form.value.floor_id);
  areaList.value = floor?.areas || []
}

const changeWarehouse = async (val) => {
  const warehouse = props.wareDataList.find(element => element.id === val);
  form.value.warehouse_name = warehouse?.warehouse_name
  floorList.value = warehouse?.floors || []
  areaList.value = []
  form.value.floor_id = ''
  form.value.area_id = ''
}

const changeFloor = async (val) => {
  const floor = floorList.value.find(element => element.id === val);
  form.value.floor_name = floor?.floor_name
  areaList.value = floor?.areas || []
  form.value.area_id = ''
}

const changeArea = async (val) => {
  const area = areaList.value.find(element => element.id === val);
  form.value.area_name = area?.area_name
}

const save = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true

      if (form.value.max_mix_num == 1 && (!form.value.max_mix_num || form.value.max_mix_num <= 1)) {
        ElMessage.error('当选择混放时，混放数量必填，且必须>1')
        return
      }
      if (form.value.id) {
        updateLocation({ ...form.value, max_mix_num: form.value.max_mix_num || 1 })
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      } else {
        saveLocation(form.value)
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      }
    }
  })
}
const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
